<template>
	<view class="content">
		<view class="card" v-for="(item,index) in list" :key="index">
			<!-- title  address -->
			<view class="one">
				<view class="">
					{{item.leName}}
				</view>
				<view class="distance">
					<!-- {{getKm(item.distance)}} -->
				</view>
			</view>
			<!-- 评分 -->
			<view class="two">
				<u-rate :count="5" active-color="#fffc00" disabled v-model="code"></u-rate>
			</view>
			<!-- 时间 -->
			<view class="common">
				<u-icon name="clock" color="#fff" size="28"></u-icon>
				<view class="title">
					{{item.leTime}}
				</view>
			</view>
			<!-- 地址 -->
			<view class="common">
				<u-icon name="map" color="#fff" size="28"></u-icon>
				<view class="title">
					{{item.leLocation}}
				</view>
			</view>
			<!-- 电话 定位 -->
			<view class="phoneOraddress">
				<u-icon class="phone" @click="playPhone(item.leNumber)" name="phone-fill" color="#fff" size="36"></u-icon>
				<u-icon name="map-fill" @click="openMap(item)" color="#fff" size="36"></u-icon>
			</view>
		</view>
			<image :src="src" mode="scaleToFill" class="images"></image>
	</view>
</template>

<script>
	import {
		url
	} from "@/common/index.js"
	import {getStore,getBg} from "@/common/api.js"
	export default {
		data() {
			return {
				code:5,
				list: [],
				src:""
			}
		},
		created() {
			this.getData()
			this.getBg()
		},
		
		methods: {
			async getBg() {
				let data = await getBg(128)
				this.src = url + data.rows[0].baUrl
			},
			async getData(){
				let data = await getStore()
				this.list = data.rows
			},
			getKm(number) {
				if (Number(number) < 1000) return (Number(number)).toFixed(2) + 'm'
				else return (Number(number) / 1000).toFixed(2) + 'km'
			},
			// 拨打电话
			playPhone(num) {
				wx.makePhoneCall({
					phoneNumber: num,
					success: res => {
						console.log(res);
					},
					fail: err => {
						console.log(err);
					}
				})
			},
			// 打开地图
			openMap(item) {
				console.log(item);
				let Arr = item.leTrapeze.split(',')
				// 微信小程序预览地图
				// #ifdef MP-WEIXIN
				wx.openLocation({
					latitude: Number(Arr[0]),
					longitude: Number(Arr[1]),
					scale: 18,
					success: res => {
						console.log(res);
					}
				})
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url:"/pagesCommon/map/map?item="+JSON.stringify(Arr)+'&address='+item.leName
				})
				// #endif

			},
			
		}
	}
</script>

<style lang='scss'>
	
	.images {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: -1;
	height: 100vh;
		z-index: -1;
	}
	.content {
		padding: 30rpx;
	}

	.card {
		width: 100%;
		min-height: 300rpx;
		border-radius: 20rpx;
		padding: 15rpx 20rpx;
		margin: 15rpx 0;
		color: #fff;
		background-color: rgba(68,68,68, 0.4);
	
	}

	.card>view {
		margin-bottom: 20rpx;
	}

	.one {
		display: flex;
		justify-content: space-between;

	}

	/* 距离 */
	.distance {
		color: #fff;
	}

	.common {
		display: flex;
	}

	.common>.title {
		margin-left: 15rpx;
	}

	.phoneOraddress {
		display: flex;
		justify-content: flex-end;
	}

	.phone {
		margin-right: 30rpx;
	}

	button {
		background-color: #fff !important;
		display: contents !important;
	}
</style>